<template>
	<view>
		<view class="wrap">
			<!-- <u-swiper :list="image_list" :effect3d="true" :border-radius="12"></u-swiper> -->
			<image class="index_banner_img" :src="src"></image>
		</view>
		<view class="banner_banner_box">
			<u-card :title="title" :thumb="thumb" :title-size="25" :show-foot="false">
				<view class="" slot="body">
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-icon name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/236b5440-4695-11eb-b997-9918a5dda011.png" :size="46"></u-icon>
							<view class="grid-text">纪念日</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/3f94cd40-4695-11eb-b680-7980c8a877b8.png" :size="46"></u-icon>
							<view class="grid-text">例假</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/215c2350-4695-11eb-bd01-97bc1429a9ff.png" :size="46"></u-icon>
							<view class="grid-text">相册</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/22c04730-4695-11eb-b997-9918a5dda011.png" :size="46"></u-icon>
							<view class="grid-text">账本</view>
						</u-grid-item>
					</u-grid>
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">敬请期待</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">敬请期待</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">敬请期待</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">敬请期待</view>
						</u-grid-item>
					</u-grid>
				</view>
			</u-card>
		</view>

		<view>
			<u-card title="纪念日" :sub-title="dateTime" :thumb="anniversaryThumb" :title-size="25" :sub-title-size="25" :show-foot="false"
			 :box-shadow="30">
				<view class="" slot="body">
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-row class="row-anniversary-grid" gutter="5">
								<u-col span="9">
									<u-count-to :start-val="0" :end-val="2113" :font-size="34"></u-count-to>
								</u-col>
								<u-col span="3" class="anniversary-grid-day">天</u-col>
							</u-row>

							<view class="anniversary-grid-text">在一起已经</view>
						</u-grid-item>

						<u-grid-item>
							<u-row class="row-anniversary-grid" gutter="5">
								<u-col span="9">
									<u-count-to :start-val="0" :end-val="185" :font-size="34"></u-count-to>
								</u-col>
								<u-col span="3" class="anniversary-grid-day">天</u-col>
							</u-row>

							<view class="anniversary-grid-text">离他生日还有</view>
						</u-grid-item>
						<u-grid-item>
							<u-row class="row-anniversary-grid" gutter="5">
								<u-col span="9">
									<u-count-to :start-val="0" :end-val="26" :font-size="34"></u-count-to>
								</u-col>
								<u-col span="3" class="anniversary-grid-day">天</u-col>
							</u-row>

							<view class="anniversary-grid-text">离她生日还有</view>
						</u-grid-item>
						<u-grid-item>
							<u-row class="row-anniversary-grid" gutter="5">
								<u-col span="9">
									<u-count-to :start-val="0" :end-val="15" :font-size="34"></u-count-to>
								</u-col>
								<u-col span="3" class="anniversary-grid-day">天</u-col>
							</u-row>

							<view class="anniversary-grid-text">姨妈来临还有</view>
						</u-grid-item>
					</u-grid>
				</view>
			</u-card>
		</view>

		<view>
			<u-card title="最近消息" :sub-title="subTitle" :thumb="thumb" :title-size="25">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">XXXX上传9张图片，点击查看</view>
						<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
						 mode="aspectFill"></image>
					</view>
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">XXXX上传6张图片，点击查看</view>
						<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
						 mode="aspectFill"></image>
					</view>
				</view>
				<view class="" slot="foot">
					<u-icon name="chat-fill" size="34" color="" label="查看更多" style="float: right;padding-bottom: 3px;"></u-icon>
				</view>
			</u-card>
		</view>
		<!-- wx用户调用权限 -->
		<u-toast ref="uToast" />
		<u-modal v-model="showUserLoginBox" :show-cancel-button="false" :show-confirm-button="false">
			<view class="slot-content">
				<rich-text :nodes="userLoginBoxContent">
				</rich-text>
				<view class="slot-content-buttonBox">
					<u-row gutter="16" class="userLoginBoxButton">
						<u-col span="6">
							<u-button shape="circle" @click="cancelLogin()">取消</u-button>
						</u-col>
						<u-col span="6">
							<u-button shape="circle" open-type='getUserInfo' @getuserinfo="bindgetuserinfo" type='success' @click="confirmLogin()">确定</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-modal>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar :list="tabBerList" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: '实用工具',
				thumb: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/255793e0-4695-11eb-bc56-c9cea619f663.png',
				anniversaryThumb: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/2210a640-4695-11eb-8ff1-d5dcf8779628.png',
				dateTime: undefined,
				src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-jiasichen/569ac5e0-4694-11eb-bf0a-894cbc80c40a.jpg",
				current: 0,
				vuex_tabbar: undefined,
				showUserLoginBox: false,
				userLoginBoxContent: "检测到您还未授权登录，需要您的授权获取基本用户信息（不含手机号码、定位等隐私信息）,我们将严格保守您的用户隐私。",
			}
		},
		computed: {
			...mapGetters([
				'tabBerList'
			])
		}, //
		mounted() {
			// #ifdef MP-WEIXIN
			var that = this
			uni.getSetting({
				success(res) {
					console.log("授权：", res);
					if (!res.authSetting['scope.userInfo']) {
						//这里调用授权
						console.log("当前未授权");
						that.showUserLoginBox = true
						// that.appLoginWx()
					} else {
						//用户已经授权过了
						console.log("当前已授权");
					}
				}
			})
			// #endif
			this.dateTime = this.getTime()
		},
		methods: {
			confirmLogin() {
				this.showUserLoginBox = false
				this.$refs.uToast.show({
					title: '取消授权',
					type: 'info'
				})
			},
			cancelLogin() {
				this.showUserLoginBox = false
			},
			// 授权登录后的回调
			bindgetuserinfo: function(res) {
				console.log(res) // "getUserInfo:fail auth deny"
				if (res.mp.detail.errMsg == "getUserInfo:ok") {
					this.$refs.uToast.show({
						title: '授权成功',
						type: 'success'
					})
				} else {
					this.$refs.uToast.show({
						title: '拒绝授权',
						type: 'info'
					})
				}
			},
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate();
					// hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					// minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					// second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '年' + month + '月' + day + '日';
				return timer;
			},
		}
	}
</script>

<style>
	.index_banner_img {
		left: 0px;
		top: 0px;
		z-index: -1;
		position: absolute;
		width: 100%;
		height: 40vh;
	}

	.banner_banner_box {
		margin-top: 5rem;

	}
</style>

<style lang="less" scoped>
	::v-deep .u-count-num {
		font-size: 22rpx;
	}
</style>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>

<style scoped lang="scss">
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.row-anniversary-grid {
		height: 50rpx;
	}

	.anniversary-grid-day {
		font-size: 30rpx;
		font-weight: normal;
		color: #303133;
		text-align: center;
		margin: 0 auto;
		line-height: 50rpx;
	}

	.anniversary-grid-text {
		font-size: 22rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.u-count-num {
		font-size: 22rpx;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;

		.slot-content-buttonBox {
			padding-top: 50rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
